/*
 * @Descripttion : QianFox让数字化营销更简单
 * @Author       : QianFox Team
 * @Date         : 2024-03-05 15:07:52
 * @Version      : V1.24
 * @Copyright    : ©2021-现在 贵州黔狐科技股份有限公司 版权所有
 * @LastEditors  : QianFox Team
 * @LastEditTime : 2024-05-14 17:28:32
 */
@mixin fontSize($size) {
    $font-size-values: (
        12: 12px,
        14: 14px,
        16: 16px,
        18: 18px,
        20: 20px,
        24: 24px,
        28: 28px,
        32: 32px,
        36: 36px,
        40: 40px,
        44: 44px,
        48: 48px,
        52: 52px,
        56: 56px,
        60: 60px,
    );
    @each $key, $value in $font-size-values {
        @if $size == none {
            .foxui-fs-#{$key} {
                font-size: #{$value} !important;
            }
        } @else {
            .foxui-fs-#{$size}-#{$key} {
                font-size: #{$value} !important;
            }
        }
    }
}

@mixin spacing($size) {
    @each $type in padding, margin {
        @for $num from 0 through 100 {
            @if $size == none {
                @if $type == padding {
                    .foxui-p-#{$num} {
                        #{$type}: #{$num}px !important;
                    }
                } @else {
                    .foxui-m-#{$num} {
                        #{$type}: #{$num}px !important;
                    }
                }

                @each $position in top, bottom, left, right, top-bottom, left-right {
                    @if $type == padding {
                        @if $position == top {
                            .foxui-pt-#{$num} {
                                padding-top: #{$num}px !important;
                            }
                        } @else if $position == bottom {
                            .foxui-pb-#{$num} {
                                padding-bottom: #{$num}px !important;
                            }
                        } @else if $position == left {
                            .foxui-pl-#{$num} {
                                padding-left: #{$num}px !important;
                            }
                        } @else if $position == right {
                            .foxui-pr-#{$num} {
                                padding-right: #{$num}px !important;
                            }
                        } @else if $position == left-right {
                            .foxui-px-#{$num} {
                                padding-left: #{$num}px !important;
                                padding-right: #{$num}px !important;
                            }
                        } @else if $position == top-bottom {
                            .foxui-py-#{$num} {
                                padding-top: #{$num}px !important;
                                padding-bottom: #{$num}px !important;
                            }
                        }
                    } @else {
                        @if $position == top {
                            .foxui-mt-#{$num} {
                                margin-top: #{$num}px !important;
                            }
                        } @else if $position == bottom {
                            .foxui-mb-#{$num} {
                                margin-bottom: #{$num}px !important;
                            }
                        } @else if $position == left {
                            .foxui-ml-#{$num} {
                                margin-left: #{$num}px !important;
                            }
                        } @else if $position == right {
                            .foxui-mr-#{$num} {
                                margin-right: #{$num}px !important;
                            }
                        } @else if $position == left-right {
                            .foxui-mx-#{$num} {
                                margin-left: #{$num}px !important;
                                margin-right: #{$num}px !important;
                            }
                        } @else if $position == top-bottom {
                            .foxui-my-#{$num} {
                                margin-top: #{$num}px !important;
                                margin-bottom: #{$num}px !important;
                            }
                        }
                    }
                }
            } @else {
                @if $type == padding {
                    .foxui-p-#{$size}-#{$num} {
                        #{$type}: #{$num}px !important;
                    }
                } @else {
                    .foxui-m-#{$size}-#{$num} {
                        #{$type}: #{$num}px !important;
                    }
                }

                @each $position in top, bottom, left, right, top-bottom, left-right {
                    @if $type == padding {
                        @if $position == top {
                            .foxui-pt-#{$size}-#{$num} {
                                padding-top: #{$num}px !important;
                            }
                        } @else if $position == bottom {
                            .foxui-pb-#{$size}-#{$num} {
                                padding-bottom: #{$num}px !important;
                            }
                        } @else if $position == left {
                            .foxui-pl-#{$size}-#{$num} {
                                padding-left: #{$num}px !important;
                            }
                        } @else if $position == right {
                            .foxui-pr-#{$size}-#{$num} {
                                padding-right: #{$num}px !important;
                            }
                        } @else if $position == left-right {
                            .foxui-px-#{$size}-#{$num} {
                                padding-left: #{$num}px !important;
                                padding-right: #{$num}px !important;
                            }
                        } @else if $position == top-bottom {
                            .foxui-py-#{$size}-#{$num} {
                                padding-top: #{$num}px !important;
                                padding-bottom: #{$num}px !important;
                            }
                        }
                    } @else {
                        @if $position == top {
                            .foxui-mt-#{$size}-#{$num} {
                                margin-top: #{$num}px !important;
                            }
                        } @else if $position == bottom {
                            .foxui-mb-#{$size}-#{$num} {
                                margin-bottom: #{$num}px !important;
                            }
                        } @else if $position == left {
                            .foxui-ml-#{$size}-#{$num} {
                                margin-left: #{$num}px !important;
                            }
                        } @else if $position == right {
                            .foxui-mr-#{$size}-#{$num} {
                                margin-right: #{$num}px !important;
                            }
                        } @else if $position == left-right {
                            .foxui-mx-#{$size}-#{$num} {
                                margin-left: #{$num}px !important;
                                margin-right: #{$num}px !important;
                            }
                        } @else if $position == top-bottom {
                            .foxui-my-#{$size}-#{$num} {
                                margin-top: #{$num}px !important;
                                margin-bottom: #{$num}px !important;
                            }
                        }
                    }
                }
            }
        }
    }
}

@mixin display($size) {
    @each $value in none, inline, inblock, block, grid, table, tcell, trow, flex, inflex {
        @if $size == none {
            @if $value == inblock {
                .foxui-d-#{$value} {
                    display: inline-block;
                }
            } @else if $value == tcell {
                .foxui-d-#{$value} {
                    display: table-cell;
                }
            } @else if $value == trow {
                .foxui-d-#{$value} {
                    display: table-row;
                }
            } @else if $value == inflex {
                .foxui-d-#{$value} {
                    display: inline-flex;
                }
            } @else {
                .foxui-d-#{$value} {
                    display: $value;
                }
            }
        } @else {
            @if $value == inblock {
                .foxui-d-#{$size}-#{$value} {
                    display: inline-block;
                }
            } @else if $value == tcell {
                .foxui-d-#{$size}-#{$value} {
                    display: table-cell;
                }
            } @else if $value == trow {
                .foxui-d-#{$size}-#{$value} {
                    display: table-row;
                }
            } @else if $value == inflex {
                .foxui-d-#{$size}-#{$value} {
                    display: inline-flex;
                }
            } @else {
                .foxui-d-#{$size}-#{$value} {
                    display: $value;
                }
            }
        }
    }
}

@mixin float($size) {
    $float: (
        responsive: true,
        property: float,
        values: (
            start: left,
            end: right,
            none: none,
        ),
    );
    @each $key, $value in map-get($float, values) {
        @if $size == none {
            .foxui-float-#{$key} {
                float: $value;
            }
        } @else {
            .foxui-float-#{$size}-#{$key} {
                float: $value;
            }
        }
    }
}

@mixin position() {
    $position-values: (
        0: 0,
        50: 50%,
        100: 100%,
    );
    @each $key, $value in $position-values {
        .foxui-top-#{$key} {
            top: $value;
        }
        .foxui-bottom-#{$key} {
            bottom: $value;
        }
        .foxui-start-#{$key} {
            left: $value;
        }
        .foxui-end-#{$key} {
            right: $value;
        }
    }
}

@mixin height() {
    $height-values: (
        0: 0,
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto,
    );
    @each $key, $value in $height-values {
        .foxui-h-#{$key} {
            height: $value !important;
        }
    }
}

@mixin width() {
    $width-values: (
        0: 0,
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto,
    );
    @each $key, $value in $width-values {
        .foxui-w-#{$key} {
            width: $value !important;
        }
    }
}

@mixin ratio() {
    $ratio-values: (
        '1x1': 100%,
        '2x1': calc(1 / 2 * 100%),
        '3x1': calc(1 / 3 * 100%),
        '3x2': calc(2 / 3 * 100%),
        '4x1': calc(1 / 4 * 100%),
        '4x3': calc(3 / 4 * 100%),
        '16x9': calc(9 / 16 * 100%),
        '21x9': calc(9 / 21 * 100%),
    );
    [class*='foxui-ratio-'] {
        position: relative;
        width: 100%;

        &::before {
            content: '';
            display: block;
            width: 100%;
        }

        & > * {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
    @each $key, $value in $ratio-values {
        .foxui-ratio-#{$key} {
            &::before {
                padding-bottom: $value;
            }
        }
    }
}

@mixin radius() {
    $radius-values: (
        zero: 0,
        xs: 4px,
        sm: 6px,
        md: 8px,
        lg: 12px,
        xl: 16px,
        xxl: 32px,
        xxxl: 48px,
        pill: 800px,
        circle: 100%,
    );
    @each $key, $value in $radius-values {
        .foxui-radius-#{$key} {
            border-radius: $value !important;
        }
    }
}
